<template>
	<view class="page">
		<u-navbar :title="navTitle"></u-navbar>
		<view v-if="type==TYPE_ENUM.BUTTON">
			<view class="nav-wrap" v-if="buttonList.length>0">
				<u-tabs ref="tabs" name="title" :list="buttonList" active-color="#09C15F" :is-scroll="true" @change="change" inactive-color="#606266" font-size="30" :current="current"></u-tabs>
			</view>
			<view style="width: 100vw;height: 80rpx;"></view>
		</view>
		<view class="introduce-background" v-if="classifyDescText">
			<view class="content">
				<view class="desc">{{classifyDescText}}</view>
			</view>
		</view>
		<!--商品列表-->
		<view class="recommend-list">
			<goods-preview v-for="(item,index) in merchantMedicineList" :key="index" :item="item"></goods-preview>
		</view>
		<view class="null">
			<u-loadmore bg-color="#f9f9f9;" color='#B5B5B5' :status="loadingStatus" :icon-type="iconType" :load-text="loadText" />
		</view>
		<!--商品列表end-->

		<cart-dialog :showModal="showModal" :goodsId="id" @hideCartModal="hideCartModal"></cart-dialog>

	</view>
</template>

<script>
	import cartDialog from '../../components/cart-dialog/cart-dialog.vue'
	import goodsPreview from '../../components/goods-preview/index.vue'
	import {GoodsListPageType} from "../../utils/enum";
	export default {
		components: {
			cartDialog,
			goodsPreview
		},
		data() {
			return {
				current: 0,
				merchantMedicineList: [],
				page: 1,
				total: 0,
				goodsDetail: '',
				id: '',
				num: 1,
				showModal: false,
				classify_id: '',
				classify_id_next: '',
				errImgUrl: this.$errorImgUrl,//找不到图片的URL
				buttonList: [],
				loadingStatus: 'loading',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				classifyInfo: '',
				classifyDescName: '',
				classifyDescText: '',
				navTitle: '',
				merchant: '',
				type: '',
				area_id: '',
				TYPE_ENUM: GoodsListPageType
			}
		},
		onReachBottom() {
			if(this.loadingStatus=="loading"||this.total==this.merchantMedicineList.length){
				return
			}
			this.page = this.page+1;
			this.getMerchantMedicineList();
		},
		methods: {
			change(index) {
				this.current = index
				this.merchantMedicineList = []
				this.page = 1
				this.classify_id = this.buttonList[index].id
				this.getMerchantMedicineList()
			},
			//获取商品列表
			async getButtonOrAreaInfo() {
				let params = {
					merchant_id: this.merchant.merchant_id,
					classify_id: this.classify_id || '',
					area_id: this.area_id,
					page: 1,
					limit: 8
				}
				let res = await this.$api.getMerchantMedicineList(params, this.$baseUrl);
				if (res.data.level == 'success') {
					let classifyInfo = res.data.data.classify_info
					if (classifyInfo && classifyInfo.next_classifies && classifyInfo.next_classifies.length > 0) {
						this.buttonList = classifyInfo.next_classifies
						this.classifyInfo = classifyInfo
						if (this.buttonList.length > 0) {
							this.classify_id = this.buttonList[0].id
							await this.getMerchantMedicineList()
						}
					} else {
						this.loadingStatus = 'nomore'
					}
				} else {
					wx.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 1500
					})
				}
			},

			//获取商品列表
			async getMerchantMedicineList(){
			  this.loadingStatus = 'loading';
			  let res=await this.$api.getMerchantMedicineList({
				  merchant_id: this.merchant.merchant_id,
				  classify_id: this.classify_id||'',
				  area_id: this.area_id||'',
				  page: this.page,
				  limit: 6
			  },this.$baseUrl);
			  if(res.data.level=='success'){
				  if(res.data.data.classify_info){
				  	this.classifyDescName = res.data.data.classify_info.name
				  	this.classifyDescText = res.data.data.classify_info.desc
				  }
				if(this.page == 1){
					this.merchantMedicineList = res.data.data.medicine_info;
				} else{
					if(res.data.data.length == 0){
					    this.page--;
					} else{
					    this.merchantMedicineList = this.merchantMedicineList.concat(res.data.data.medicine_info)
					}
				}
				this.total = res.data.page_info.total;
				//loading状态
				if(this.merchantMedicineList.length==this.total){
					this.loadingStatus = 'nomore'
				} else{
					this.loadingStatus = 'loadmore'
				}
			  } else{
				  wx.showToast({
				  	title: res.data.message,
					icon: 'none',
					duration: 1500
				  })
			  }
			},

			//隐藏购物车
			hideCartModal(){
			  this.id = ''
			  this.showModal = false;
			},

			//跳转商品详情
			toGoodsDetail(id){
			  wx.navigateTo({url:'/pages/goodsDetail/goodsDetail?id='+id})
			},
		},
		onShow() {
			this.merchant = wx.getStorageSync('merchant')
			//显示功能区和专区的列表数据
			if([GoodsListPageType.CLASSIFY,GoodsListPageType.BUTTON].includes(this.type)){
				this.getButtonOrAreaInfo();
			} else if(this.type==GoodsListPageType.SHOP){ //显示分类页面的数据
				this.getMerchantMedicineList()
			}
		},
		onLoad(options) {
			this.classify_id = options.classifyId
			this.area_id = options.areaId
			this.navTitle = options.name
			this.type = options.type
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../common/css/mixin";
	.page{
		min-height: 100vh;
		background-color: #F9F9F9;
	}
	.nav-wrap{
		position: fixed;
		left: 0;
		right: 0;
		width: 100vw;
		z-index: 99;
	}
	.introduce-background{
		width: 100vw;
		min-height: 96px;
		background-image: url(../../static/goodsDetail/background.png);
		background-size: 100% auto;
		display: flex;
		align-items: center;
		justify-content: center;
		.content{
			width: calc(100vw - 40px);
			color: #FFFFFF;
			h1{
				font-size: 14px;
				font-weight: bold;
			}
			.desc{
				font-size: 14px;
				font-weight: bold;
				/* font-size: 11px;
				margin-top: 10px; */
			}
		}
	}
	.recommend-list{
	  @include flexWrap(flex-start,flex-start);
	  flex-direction: row;
	  justify-content: space-between;
	  width: calc(100vw - 40rpx);
	  background-color: #F9F9F9;
	  padding: 20rpx;
	  .null{
	    width: 100%;
	    padding: 60rpx 0;
	    text-align: center;
	    font-size: 34rpx;
	    color: #959595;
	    height: 100rpx;
	    line-height: 100rpx;
	  }
	}
</style>
